<template>
  <div>
    <div  id="continer">
      <a-row type="flex" class="row-bg mainbox" justify="space-between">
        <!--    第一列-->
        <a-col :gutter="5" :xs="24" :sm="24" :md="6" :lg="6" class="chartCol">
          <!--柱状图-->
          <a-row :xs="24" :sm="24" :md="6" :lg="6" class="row_style">
            <a-card class="update-log panel bar">
              <div class="body">
                <div id="collegeRegistration" class="collegeRegistration">
                </div>
                <!-- <div class="pana-footer"></div> -->
              </div>
            </a-card>
          </a-row>

          <!--饼图图-->
          <a-row :xs="24" :sm="24" :md="6" :lg="6" class="row_style" style="margin-top: -15px">
            <a-card class="update-log panel pie">
              <div class="body">
                <div id="honor-contest" class="honor-contest"></div>
                <div class="pana-footer"></div>
              </div>
            </a-card>
          </a-row>
          <!--      时间趋势-->
          <a-row :xs="24" :sm="24" :md="6" :lg="6" class="row_style" style="margin-top: -15px">
            <a-card class="update-log panel line">
              <div class="body">
                <div id="honor-time" class="rose-contest">
                </div>
                <div class="pana-footer"></div>
              </div>
            </a-card>
          </a-row>
        </a-col>
        <!--    第二列，地图-->
        <a-col :gutter="5" :xs="24" :sm="24" :md="11" :lg="11" class="chartCol">
          <!--柱状图-->
          <div style="margin-bottom: 20px">
            <a-row style="display: flex; justify-content: center;">
              <div style="color: #ffba00; margin-bottom: 5px; font-size: 20px">我的账单分析</div>
            </a-row>
            <a-row style="display: flex; justify-content: center;">
              <div class="panel" style="max-width: 150px; margin-right: 10px;">
                <div style="color: #FFFFFF; display: flex; justify-content: center; align-items: center; max-width: 150px; height: 30px;">国赛一等奖<span style="margin-left: 5px; color: red;">3</span></div>
                <div class="pana-footer"></div>
              </div>
              <div class="panel" style="max-width: 150px; margin-right: 10px">
                <div style="color: #FFFFFF; display: flex; justify-content: center; align-items: center; max-width: 150px; height: 30px;">国赛二等奖<span style="margin-left: 5px; color: red;">7</span></div>
                <div class="pana-footer"></div>
              </div>
              <div class="panel" style="max-width: 150px; margin-right: 10px">
                <div style="color: #FFFFFF; display: flex; justify-content: center; align-items: center; max-width: 150px; height: 30px;">国赛三等奖<span style="margin-left: 5px; color: red;">14</span></div>
                <div class="pana-footer"></div>
              </div>

            </a-row>
          </div>
          <a-row>
            <a-card class="update-log map">
              <div class="body">
                <div id="echart_china" ref="echart_china" class="echart_china">
                  <!-- <div class="map1"></div>-->
                </div>
                <div class="map-footer"></div>
              </div>
            </a-card>
          </a-row>
        </a-col>
        <!--    第三列-->
        <a-col :gutter="5" :xs="24" :sm="24" :md="6" :lg="6" class="chartCol">
          <!--  柱状图    -->
          <a-row :xs="24" :sm="24" :md="6" :lg="6" >
            <a-card class="update-log panel bar1">
              <div class="body">
                <div id="honorSchool" class="collegeReward"></div>
                <div class="pana-footer"></div>
              </div>
            </a-card>
          </a-row>
          <a-row :xs="24" :sm="24" :md="6" :lg="6" style="margin-top: -15px">
            <a-card class="update-log panel line1">
              <div class="body">
                <div id="registrationHot" class="rose-contestHonor"></div>
                <div class="pana-footer"></div>
              </div>
            </a-card>
          </a-row>
          <a-row :gutter="5" :xs="24" :sm="24" :md="6" :lg="6" style="margin-top: -15px">
            <a-card class="update-log panel pie1">
              <div class="body">
                <div id="yuntu" class="yuntu"></div>
                <div class="pana-footer"></div>
              </div>
            </a-card>
          </a-row>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import chinaMap from "/src/assets/json/china.json"
import 'echarts-wordcloud';
import * as echarts from "echarts";
// import {listHonorHlwjAll, listHonorSchoolAll} from "../api/contest/chart";
import Predict from "./predict.vue";

export default {
  name: 'app',
  components: {Predict},
  // components: {
  //   wordcloud
  // },
  data(){
    return{
      orderInfo:[],
      columns
    }
  },
  methods: {
     initecharts_1() {
 		// var myChart = echarts.init(document.getElementById('collegeRegistration'));
 		const option = {
 			tooltip: {

 				trigger: 'axis',
 				axisPointer: {
 					lineStyle: {
 						color: '#57617B'
 					}
 				},
 				formatter: '{b}日	:<br/> 生产情况{c}'
 			},

 			grid: {
 				left: '0',
 				right: '20',
 				top: '10',
 				bottom: '0',
 				containLabel: true
 			},
 			xAxis: [{
 				type: 'category',
 				boundaryGap: false,
 				axisLine: {
					show: false,
 					lineStyle: {
 						color: 'rgba(255,255,255,.6)'
 					}
 				},
 				data: ['10.2', '10.3', '10.4', '10.5', '10.6', '10.7']
 			}],
 			yAxis: [{
 				axisLabel: {
 					show: true,
 					textStyle: {
 						color: 'rgba(255,255,255,.6)'
 					}
 				},
 				axisLine: {
					show: false,

 				},
 				splitLine: {
 					lineStyle: {
						type:'dotted',
 						color: 'rgba(255,255,255,.1)'
 					}
 				}
 			}],
 			series: [{
 				name: '生产情况',
 				type: 'line',
 				smooth: true,
 				symbol: 'circle',
 				symbolSize: 5,
 				showSymbol: false,
 				lineStyle: {
 					normal: {
 						width: 2
 					}
 				},

 				areaStyle: {
 					normal: {
 						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
 							offset: 0,
 							color: 'rgba(98, 201, 141, 0.5)'
 						}, {
 							offset: 1,
 							color: 'rgba(98, 201, 141, 0.1)'
 						}], false),
 						shadowColor: 'rgba(0, 0, 0, 0.1)',
 						shadowBlur: 10
 					}
 				},
 				itemStyle: {
 					normal: {
 						color: '#4cb9cf',
 						borderColor: 'rgba(98, 201, 141,0.27)',
 						borderWidth: 12
 					}
 				},
 				data: [91, 60, 70, 54, 80, 40]
 			}]
 		};

 		// 使用刚指定的配置项和数据显示图表。
        // document.getElementById('collegeRegistration').removeAttribute('_echarts_instance_');

        var myChartOne = this.$echarts.init(document.getElementById("collegeRegistration")); //图标初始化
        myChartOne.setOption(option);
        window.onresize = function () {
          myChartOne.resize();
        };
 	},
      goToFee(){
      let username = this.$store.getters.getUser.username;
      this.$axios.get("/order/" + username + "/1/4", {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          this.orderInfo = res.data.data.data.orderList.drugs;
          this.total = res.data.data.data.total;
          // 我在请求数据时对总数做一个判断，然后是否判断禁用下一页按钮
          // 总数小于等于10，直接禁用上一页和下一页
          if (res.data.data.data.total <= 10) {
            this.isNext = true;
            this.isBefore = true;
          } else {
            // 总数大于10的情况
            // 判断请求数据时，是第几页，如果不是第一页，就让第一页disabled = false
            if (this.current > 1) {
              this.isBefore = false;
            }
            // 如果总页数等于当前页且当前页不等于1，就禁用下一页
            if (
              this.current == Math.ceil(res.data.data.data.total / 10) &&
              this.current != 1
            ) {
              this.isNext = true;
            } else {
              // 否则，就启用下一页
              this.isNext = false;
            }
          }
          console.log("total====>", res.data.data.data.total);
          console.log("orderList===>", res.data.data.data.orderList);
          // console.log(res);
          // console.log(this.isNext);
          // console.log(this.total);
        });
    },
    showPredict(){
      this.show = false;
    },
    showHistory(){

      this.initMap();
          this.initone();
          this.inittwo();
          this.initthree();
          this.initfour();
          this.initfive();
          this.initsix();
      this.show = true;
    },




    initone() {
      setTimeout(() => {
        this.initHonorLqbs();
      }, 100);
    },
    async initHonorLqbs() {
      try {
        let response;
        if (this.value === '' || this.value === '全部') {
          console.log("执行if")
          this.realvalue = '';
          response = await listHonorLqbs({year: this.realvalue})
          const mid_result = response.data;//获取接口中的数据
          var data = {};
          console.log(mid_result)
          // 遍历数据数组
          for (var i = 0; i < mid_result.length; i++) {
            var item = mid_result[i];
            var track = item.track;
            var quantity = item.count;

            // 检查赛道是否已存在于结果对象中
            if (data.hasOwnProperty(track)) {
              // 如果已存在，则将数量累加到已有值上
              data[track] += quantity;
            } else {
              // 如果不存在，则将赛道作为新的属性，并赋初值为数量
              data[track] = quantity;
            }
          }
          console.log("蓝桥杯赛道数据", data)
          //下面是关键代码，替换数据
          var result = [];
          var yresult = [];

          Object.keys(data).forEach((key) => {
            result.push(key);
            yresult.push(data[key]);
          });
          this.mid_xresult = [];
          this.mid_yresult = [];
          for (let i = 0; i < result.length; i++) {
            this.mid_xresult.push(result[i])
          }
          for (let i = 0; i < yresult.length; i++) {
            this.mid_yresult.push(yresult[i])
          }
          console.log(this.mid_xresult, this.mid_yresult)
        } else {
          console.log("执行else")
          this.realvalue = this.value

          // listHonorLqbs({year: this.realvalue}).then((response => {
          response = await listHonorLqbs({year: this.realvalue});
          const data = response.data;//获取接口中的数据
          //下面是关键代码，替换数据
          const result = []
          data.forEach((item) => {
            result.push(item.track)
          })
          const yresult = []
          data.forEach((item) => {
            yresult.push(item.count)
          })
          this.mid_xresult = [];
          this.mid_yresult = [];
          for (let i = 0; i < result.length; i++) {
            this.mid_xresult.push(result[i])
          }
          for (let i = 0; i < yresult.length; i++) {
            this.mid_yresult.push(yresult[i])
          }
        }
        const option = {
          title: {
            text: '蓝桥杯赛道分析',
            textStyle: {
              color: '#fff'
            }
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            show: false,
            top: '14%',
            left: 'left',
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisLabel: {
              color: '#fff'
            }
          },
          xAxis: {
            type: 'category',
            data: this.mid_xresult,
            axisLabel: {
              color: '#fff',
              interval: 0,
              fontSize: 12,
              rotate: 25,  //设置倾斜角度25°
            },
          },
          series: [
            {
              name: this.searchParams.year,
              type: 'bar',
              label: {
                show: true,
                position: 'top'
              },
              barWidth: 30,
              itemStyle: {
                normal: {
                  color: function (params) {
                    let colorList = [
                      '#FA897B',
                      '#FFDD94',
                      '#D0E6A5',
                      '#4675C0',
                      '#B8BFD6',
                      '#FFA876',
                      '#F0C987',
                      '#7EAFB6',
                      '#D8A7E1',
                      '#84C9A5',
                      '#F89B9D',
                      '#6D8DBE',
                      '#F3D599',
                      '#A4C4A8',
                      '#E58C9F',
                      '#F2E5B1',
                      '#A3D4C8',
                      '#D1A3D6',
                      '#E8CBB0',
                      '#C9E6D5',
                      '#B1C5E8',
                      '#F5D6A8',
                      '#C8E8D4',
                      '#A8BDE5'
                    ];
                    return colorList[params.dataIndex % colorList.length];
                  }
                }
              },
              data: this.mid_yresult
            }
          ]
        };
        document.getElementById('collegeRegistration').removeAttribute('_echarts_instance_');

        var myChartOne = this.$echarts.init(document.getElementById("collegeRegistration")); //图标初始化
        myChartOne.setOption(option);
        window.onresize = function () {
          myChartOne.resize();
        };
      } catch (err) {
        console.log(err)
      }

    },
    inittwo() {
      setTimeout(() => {
        this.initContestHonor();
      }, 100);
    },
    initContestHonor() {
      if (this.value == '全部' || this.value == '') {
        this.realvalue = '';
        listHonorTime({year: this.realvalue}).then((response => {
          const data = response.data;//获取接口中的数据
          var mid_result = {};
          for (var i = 0; i < data.length; i++) {
            var item = data[i];
            var track = item.contest;
            var quantity = item.count;

            // 检查赛道是否已存在于结果对象中
            if (mid_result.hasOwnProperty(track)) {
              // 如果已存在，则将数量累加到已有值上
              mid_result[track] += quantity;
            } else {
              // 如果不存在，则将赛道作为新的属性，并赋初值为数量
              mid_result[track] = quantity;
            }
          }
          console.log("全部竞赛数据", mid_result)
          const result = []
          const yresult = []
          Object.keys(mid_result).forEach((key) => {
            result.push(key);
            yresult.push(mid_result[key]);
          });
          console.log(result, yresult)
          const rdata = []
          for (let i = 0; i < result.length; i++) {
            rdata.push({
              name: result[i],
              value: yresult[i]
            })
          }
          const option = {
            title: {
              text: '竞赛获奖分析',
              textStyle: {
                color: '#fff'
              }
            },
            legend: {
              top: 'bottom',
              textStyle: {
                color: '#fff'
              },
            },
            toolbox: {
              show: true,
              feature: {
                mark: {show: true},
                restore: {show: true},
                saveAsImage: {show: true}
              }
            },
            tooltip: {
              trigger: 'item', // 鼠标悬停触发提示框
              formatter: '{b}: {c}' // 显示数据的名称和值
            },
            series: [
              {
                name: '互联网+省份获奖分析',
                type: 'pie',
                radius: '50%',
                data: rdata,
                height: '90%',
                weight: '90%'
              }
            ]
          };
          document.getElementById('honor-contest').removeAttribute('_echarts_instance_');
          var pieContainer = this.$echarts.init(document.getElementById("honor-contest")); //图标初始化
          // 检查DOM元素是否存在且具有非零的客户端宽度和高度
          const domElement = document.getElementById('honor-contest');
          pieContainer.setOption(option);
          window.onresize = function () {
            pieContainer.resize();
          };
        })).catch((error) => {
          console.error(error);
        });
      } else {
        this.realvalue = this.value
        listHonorTime({year: this.realvalue}).then((response => {
          const data = response.data;//获取接口中的数据
          console.log("第二个图", data)
          //下面是关键代码，替换数据
          const result = []
          data.forEach((item) => {
            result.push(item.contest)
          })
          const yresult = []
          data.forEach((item) => {
            yresult.push(item.count)
          })
          const rdata = []
          for (let i = 0; i < result.length; i++) {
            rdata.push({
              name: result[i],
              value: yresult[i]
            })
          }
          const option = {
            title: {
              text: '竞赛获奖分析',
              textStyle: {
                color: '#fff'
              },
            },
            legend: {
              top: 'bottom',
              textStyle: {
                color: '#fff'
              },
            },
            toolbox: {
              show: true,
              feature: {
                mark: {show: true},
                restore: {show: true},
                saveAsImage: {show: true}
              },
            },
            tooltip: {
              trigger: 'item', // 鼠标悬停触发提示框
              formatter: '{b}: {c}' // 显示数据的名称和值
            },
            series: [
              {
                name: '互联网+省份获奖分析',
                type: 'pie',
                // radius: '50%',
                radius: '50%',
                data: rdata,
                height: '90%',
                weight: '90%'
                // emphasis: {
                //   itemStyle: {
                //     shadowBlur: 10,
                //     shadowOffsetX: 0,
                //     shadowColor: 'rgba(0, 0, 0, 0.5)'
                //   }
                // }
              }
            ]
          };
          document.getElementById('honor-contest').removeAttribute('_echarts_instance_');
          var pieContainer = this.$echarts.init(document.getElementById("honor-contest")); //图标初始化
          // 检查DOM元素是否存在且具有非零的客户端宽度和高度
          const domElement = document.getElementById('honor-contest');
          pieContainer.setOption(option);
          window.onresize = function () {
            pieContainer.resize();
          };
        })).catch((error) => {
          console.error(error);
        });
      }
    },

    initthree() {
      setTimeout(() => {
        this.initHonorTime();
      }, 100);
    },

    initHonorTime() {
      if (this.value == '全部') {
        this.realvalue = '';
      } else {
        this.realvalue = this.value
      }
      listHonorTime({year: this.realvalue}).then((response => {
        console.log("当前年份是", this.realvalue)
        const data = response.data;//获取接口中的数据
        //下面是关键代码，替换数据
        const result = [];
        var count = 1;
        data.forEach((item) => {
          if (count <= 5) {
            count = count + 1;
            result.push(item.contest)
          }
        })

        const yresult_19 = [];
        data.forEach((item) => {
          if (item.year === '2019') {
            yresult_19.push(item.count)
          }
        })
        const yresult_20 = [];
        data.forEach((item) => {
          if (item.year === '2020') {
            yresult_20.push(item.count)
          }
        })
        const yresult_21 = [];
        data.forEach((item) => {
          if (item.year === '2021') {
            yresult_21.push(item.count)
          }
        })
        const yresult_22 = [];
        data.forEach((item) => {
          if (item.year === '2022') {
            yresult_22.push(item.count)
          }
        })
        const yresult_23 = [];
        data.forEach((item) => {
          if (item.year === '2023') {
            yresult_23.push(item.count)
          }
        })
        var fontColor = '#000';
        const option = {
          title: {
            text: '时间趋势获奖分析',
            textStyle: {
              color: '#fff'
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              axisLabel: {
                color: '#fff',
                interval: 0,
                fontSize: 12,
                rotate: 25,  //设置倾斜角度25°
              },
              type: 'category',
              boundaryGap: false,
              data: result
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                color: '#fff'
              }
            }
          ],
          series: [
            {
              name: '2019',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: yresult_19
            },
            {
              name: '2020',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: yresult_20
            },
            {
              name: '2021',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: yresult_21
            },
            {
              name: '2022',
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: yresult_22
            },
            {
              name: '2023',
              type: 'line',
              stack: 'Total',
              label: {
                show: true,
                position: 'top'
              },
              areaStyle: {},
              emphasis: {
                focus: 'series'
              },
              data: yresult_23
            }
          ]

        };
        document.getElementById('honor-time').removeAttribute('_echarts_instance_');
        var chartContainer = this.$echarts.init(document.getElementById('honor-time'));
        chartContainer.setOption(option);
      })).catch((error) => {
        console.error(error);
      });
    },

    initfour() {
      setTimeout(() => {
        this.initHonorSchool();
      }, 100);
    },

    initHonorSchool() {
      if (this.value === '全部' || this.value === '') {
        this.realvalue = '';
        listHonorSchoolAll().then((response => {
          const data = response.data;//获取接口中的数据
          //下面是关键代码，替换数据
          const result = []
          data.forEach((item) => {
            console.log(item.count)
            result.push(item.school)
          })
          console.log("高校数据", result)
          const yresult = []
          data.forEach((item) => {
            yresult.push(item.count)
          })
          const option = {
            title: {
              text: '获奖高校Top10',
              textStyle: {
                color: '#fff'
              }
            },
            toolbox: {
              show: true,
              feature: {
                mark: {show: true},
                restore: {show: true},
                saveAsImage: {show: true}
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              show: false,
              top: '14%',
              left: 'left',
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01],
              axisLabel: {
                color: '#fff'
              }
            },
            yAxis: {
              type: 'category',
              data: result,
              axisLabel: {
                // fontSize: 6,
                rotate: 8, // 设置倾斜角度，单位为度
                textStyle: {
                  align: 'center' // 文字水平对齐方式，默认为auto，可选值为：auto（自动）、left（左对齐）、right（右对齐）、center（居中）
                },
                color: '#fff'
              }
            },
            series: [
              {
                name: this.searchParams.year,
                type: 'bar',
                itemStyle: {
                  normal: {
                    color: function (params) {
                      let colorList = [
                        '#FA897B',
                        '#FFDD94',
                        '#D0E6A5',
                        '#4675C0',
                        '#B8BFD6',
                        '#FFA876',
                        '#F0C987',
                        '#7EAFB6',
                        '#D8A7E1',
                        '#84C9A5',
                        '#F89B9D',
                        '#6D8DBE',
                        '#F3D599',
                        '#A4C4A8',
                        '#E58C9F',
                        '#F2E5B1',
                        '#A3D4C8',
                        '#D1A3D6',
                        '#E8CBB0',
                        '#C9E6D5',
                        '#B1C5E8',
                        '#F5D6A8',
                        '#C8E8D4',
                        '#A8BDE5'
                      ];
                      return colorList[params.dataIndex % colorList.length];
                    }
                  }
                },
                data: yresult
              }
            ]
          };
          document.getElementById('honorSchool').removeAttribute('_echarts_instance_');
          var myChartOne = this.$echarts.init(document.getElementById("honorSchool")); //图标初始化
          myChartOne.setOption(option);
          window.onresize = function () {
            myChartOne.resize();
          };
        })).catch((error) => {
          console.error(error);
        });
      } else {
        this.realvalue = this.value
        listHonorSchool({year: this.realvalue}).then((response => {
          const data = response.data.slice(0,10);//获取接口中的数据
          //下面是关键代码，替换数据
          const result = []
          data.forEach((item) => {
            result.push(item.school)
          })
          const yresult = []
          data.forEach((item) => {
            yresult.push(item.count)
          })
          console.log(yresult,result)
          const option = {
            title: {
              text: '获奖高校Top10',
              textStyle: {
                color: '#fff'
              }
            },
            toolbox: {
              show: true,
              feature: {
                mark: {show: true},
                restore: {show: true},
                saveAsImage: {show: true}
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              show: false,
              top: '14%',
              left: 'left',
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01],
              axisLabel: {
                color: '#fff'
              }
            },
            yAxis: {
              type: 'category',
              data: result,
              axisLabel: {
                rotate: 25, // 设置倾斜角度，单位为度
                textStyle: {
                  align: 'center' // 文字水平对齐方式，默认为auto，可选值为：auto（自动）、left（左对齐）、right（右对齐）、center（居中）
                },
                color: '#fff'
              }
            },
            series: [
              {
                name: this.searchParams.year,
                type: 'bar',
                itemStyle: {
                  normal: {
                    color: function (params) {
                      let colorList = [
                        '#FA897B',
                        '#FFDD94',
                        '#D0E6A5',
                        '#4675C0',
                        '#B8BFD6',
                        '#FFA876',
                        '#F0C987',
                        '#7EAFB6',
                        '#D8A7E1',
                        '#84C9A5',
                        '#F89B9D',
                        '#6D8DBE',
                        '#F3D599',
                        '#A4C4A8',
                        '#E58C9F',
                        '#F2E5B1',
                        '#A3D4C8',
                        '#D1A3D6',
                        '#E8CBB0',
                        '#C9E6D5',
                        '#B1C5E8',
                        '#F5D6A8',
                        '#C8E8D4',
                        '#A8BDE5'
                      ];
                      return colorList[params.dataIndex % colorList.length];
                    }
                  }
                },
                data: yresult
              }
            ]
          };
          document.getElementById('honorSchool').removeAttribute('_echarts_instance_');
          var myChartOne = this.$echarts.init(document.getElementById("honorSchool")); //图标初始化
          myChartOne.setOption(option);
          window.onresize = function () {
            myChartOne.resize();
          };
        })).catch((error) => {
          console.error(error);
        });
      }
    //   listHonorSchool().then((response => {
    //     const data = response.data;//获取接口中的数据
    //     //下面是关键代码，替换数据
    //     const result = []
    //     data.forEach((item) => {
    //       result.push(item.school)
    //     })
    //     const yresult = []
    //     data.forEach((item) => {
    //       yresult.push(item.count)
    //     })
    //     const option = {
    //       title: {
    //         text: '获奖高校Top10'
    //       },
    //       toolbox: {
    //         show: true,
    //         feature: {
    //           mark: {show: true},
    //           restore: {show: true},
    //           saveAsImage: {show: true}
    //         }
    //       },
    //       tooltip: {
    //         trigger: 'axis',
    //         axisPointer: {
    //           type: 'shadow'
    //         }
    //       },
    //       legend: {
    //         show: false,
    //         top: '14%',
    //         left: 'left',
    //       },
    //       grid: {
    //         left: '3%',
    //         right: '4%',
    //         bottom: '3%',
    //         containLabel: true
    //       },
    //       xAxis: {
    //         type: 'value',
    //         boundaryGap: [0, 0.01]
    //       },
    //       yAxis: {
    //         type: 'category',
    //         data: result
    //       },
    //       series: [
    //         {
    //           name: this.searchParams.year,
    //           type: 'bar',
    //           itemStyle: {
    //             normal: {
    //               color: function (params) {
    //                 let colorList = [
    //                   '#FA897B',
    //                   '#FFDD94',
    //                   '#D0E6A5',
    //                   '#4675C0',
    //                   '#B8BFD6',
    //                   '#FFA876',
    //                   '#F0C987',
    //                   '#7EAFB6',
    //                   '#D8A7E1',
    //                   '#84C9A5',
    //                   '#F89B9D',
    //                   '#6D8DBE',
    //                   '#F3D599',
    //                   '#A4C4A8',
    //                   '#E58C9F',
    //                   '#F2E5B1',
    //                   '#A3D4C8',
    //                   '#D1A3D6',
    //                   '#E8CBB0',
    //                   '#C9E6D5',
    //                   '#B1C5E8',
    //                   '#F5D6A8',
    //                   '#C8E8D4',
    //                   '#A8BDE5'
    //                 ];
    //                 return colorList[params.dataIndex % colorList.length];
    //               }
    //             }
    //           },
    //           data: yresult
    //         }
    //       ]
    //     };
    //
    //     var myChartOne = this.$echarts.init(document.getElementById("honorSchool")); //图标初始化
    //     myChartOne.setOption(option);
    //     window.onresize = function () {
    //       myChartOne.resize();
    //     };
    //   })).catch((error) => {
    //     console.error(error);
    //   });
    },
    initfive() {
      setTimeout(() => {
        this.initRegistrationHot();
      }, 100);
    },
    initRegistrationHot() {
      listRegistrationHot().then((response => {
        const data = response.data;//获取接口中的数据
        const result = []
        data.forEach((item) => {
          result.push({
            name: item.contest,
            value: item.count
          })
        })

        const option = {
          title: {
            text: '竞赛热度分析',
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          legend: {
            top: '9%',
            left: 'center',
            // doesn't perfectly work with our tricks, disable it
            selectedMode: false,
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              // name: '',
              type: 'pie',
              radius: ['40%', '60%'],
              center: ['50%', '70%'],
              // adjust the start angle
              startAngle: 180,
              label: {
                show: true,
                formatter(param) {
                  // correct the percentage
                  return param.name + ' (' + param.percent * 2 + '%)';
                }
              },
              data: result,
            }
          ]
        };
        document.getElementById('registrationHot').removeAttribute('_echarts_instance_');
        var myChartOne = this.$echarts.init(document.getElementById("registrationHot")); //图标初始化
        myChartOne.setOption(option);
        window.onresize = function () {
          myChartOne.resize();
        };
      })).catch((error) => {
        console.error(error);
      });
    },

    initsix() {
      setTimeout(() => {
        this.initKnowledgeCloud();
      }, 100);
    },
    initKnowledgeCloud() {
      listKnowledgeCloud().then(response => response.data)
        .then(data => {
          this.defaultWords = data.map(item => ({
            name: item.label,
            value: item.count
          }));
          console.log(this.defaultWords);

          const option = {
            title: {
              text: '知识图云',
              textStyle: {
                color: '#fff'
              }

            },
            grid: {
              top: 120,  // 调整词云图距离顶部的距离
              left: 10,  // 调整词云图距离左侧的距离
              right: 10,  // 调整词云图距离右侧的距离
              bottom: 10  // 调整词云图距离底部的距离
            },
            toolbox: {
              show: true,
              feature: {
                mark: {show: true},
                saveAsImage: {show: true}
              }
            },
            series: [{
              type: 'wordCloud',
              sizeRange: [15, 50],
              rotationRange: [-90, 90],
              rotationStep: 45,
              gridSize: 8,
              shape: 'circle',
              width: '80%',
              height: '80%',
              textStyle: {
                fontFamily: 'sans-serif',
                fontWeight: 'normal',
                color: function () {
                  return 'rgb(' + [
                    Math.round(Math.random() * 255),
                    Math.round(Math.random() * 255),
                    Math.round(Math.random() * 255)
                  ].join(',') + ')';
                },
                emphasis: {
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              data: this.defaultWords
            }]
          };
          // var myChartSix = this.$echarts.init(document.getElementById("yuntu"));
          // myChartSix.setOption(option);
          document.getElementById('yuntu').removeAttribute('_echarts_instance_');
          const echartDom = document.getElementById('yuntu')
          const myChart = echarts.init(echartDom)
          option && myChart.setOption(option)
          window.onresize = function () {
            myChart.resize();
          };
          // window.onresize = function () {
          //   myChartSix.resize();
          // };
        }).catch(error => {
        console.error(error);
      });
    },


    getRandomColor() {
      return 'rgb(' + [
        Math.round(Math.random() * 160),
        Math.round(Math.random() * 160),
        Math.round(Math.random() * 160),
      ].join(',') + ')'
    },


    // isInTopTenPronvince(province){
    //   if (topTenProvinces.indexOf(params.name) !== -1) {
    //     return params.name;
    //   } else {
    //     return '';
    //   }
    // },
    /*
      显示中国地图
    */
    initMap() {
      if (this.value == '全部' || this.value == '') {
        listHonorHlwjAll().then((response => {
          console.log("请求接口获得数据", response)
          const data = response.data;//获取接口中的数据
          const result = []
          data.forEach((item) => {
            result.push({
              name: item.province,
              value: item.count
            })
          })
          // 按照数量从大到小进行排序
          result.sort((a, b) => b.value - a.value);
          // 获取排名前十的省份名称
          var topTenProvinces = result.slice(0, 10).map(item => item.name);
          console.log(topTenProvinces)
          console.log("data", result)
          // 2. 注册可用的地图，只在 geo 组件或者map图表类型中使用
          this.$echarts.registerMap("china", chinaMap); //用导入的json文件注册一个name:china的地图组件

          // 3. 设置图表 option
          var option = {
            title: {
              text: "互联网+获奖分布图",
              // subtext: "",
              left: "center",
              textStyle: {
                color: "#fff",
                fontSize: 30,
              },
              subtextStyle: {
                fontSize: 20,
              },
            },
            tooltip: {
              triggerOn: "mousemove",
              formatter: function (e, t, n) {
                return e.seriesName + "<br />" + e.name + "：" + e.value;
              },
            },
            // 热力地图
            visualMap: {
              min: 0,
              max: 1000,
              left: 30,
              textStyle: {
                color: "#fff",
              },
              pieces: [
                {
                  gt: 300,
                  label: "> 300 项",
                  color: "#7f1100",
                },
                {
                  gte: 150,
                  lte: 300,
                  label: "150 - 300 项",
                  color: "#ff5428",
                },
                {
                  gte: 50,
                  lt: 150,
                  label: "50 - 150 项",
                  color: "#ff8c71",
                },
                {
                  gte: 0,
                  lt: 50,
                  label: "0 - 50 项",
                  color: "#ffd768",
                },
              ],
            },

            series: [
              {
                name: "获奖数",
                data: result,
                type: "map",
                map: "china",
                zoom: 1.2,
                aspectScale: 0.75,
                label: {
                  // 默认文本标签样式
                  normal: {
                    color: "#000",
                    show: true,
                    formatter: function (params) {
                      console.log('城市名称',params)
                      if (topTenProvinces.indexOf(params.name) !== -1) {
                        return params.name;
                      } else {
                        return '';
                      }
                    }
                  },
                  // 高亮文本标签样式
                  emphasis: {
                    color: "#999",
                    fontSize: 22,
                    fontWeight: "bold",
                  },

                },
                itemStyle: {
                  // 默认区域样式
                  normal: {
                    // 区域背景透明
                    // areaColor: "transparent",
                    borderColor: "rgba(39,211,233, 1)",
                    borderWidth: 1,
                  },
                  // 高亮区域样式
                  emphasis: {
                    // 高亮区域背景色
                    areaColor: "#7f1100",
                    label: {
                      show: true,
                    },
                  },
                },
              },
            ],
          };
          console.log(topTenProvinces)
          document.getElementById('echart_china').removeAttribute('_echarts_instance_');
          // 4. 显示地图
          var chartContainer = this.$echarts.init(document.getElementById('echart_china'));
          chartContainer.setOption(option);
          window.onresize = function () {
            chartContainer.resize();
          };
        })).catch((error) => {
          console.error(error);
        });
      } else {
        this.realvalue = this.value;
        listHonorHlwj({year: this.realvalue}).then((response => {
          console.log("请求接口获得数据", response)
          const data = response.data;//获取接口中的数据
          const result = []
          data.forEach((item) => {
            result.push({
              name: item.province,
              value: item.count
            })
          })
          console.log("data", result)
          // 按照数量从大到小进行排序
          result.sort((a, b) => b.value - a.value);
          // 获取排名前十的省份名称
          var topTenProvinces = result.slice(0, 10).map(item => item.name);
          // 2. 注册可用的地图，只在 geo 组件或者map图表类型中使用
          this.$echarts.registerMap("china", chinaMap); //用导入的json文件注册一个name:china的地图组件

          // 3. 设置图表 option
          var option = {
            title: {
              text: "互联网+获奖分布图",
              // subtext: "",
              left: "center",
              textStyle: {
                color: "#fff",
                fontSize: 30,
              },
              subtextStyle: {
                fontSize: 20,
              },
            },
            tooltip: {
              triggerOn: "mousemove",
              formatter: function (e, t, n) {
                return e.seriesName + "<br />" + e.name + "：" + e.value;
              },
            },
            // 热力地图
            visualMap: {
              min: 0,
              max: 1000,
              left: 30,
              textStyle: {
                color: "#fff",
              },
              pieces: [
                {
                  gt: 30,
                  label: "> 30 项",
                  color: "#7f1100",
                },
                {
                  gte: 20,
                  lte: 30,
                  label: "20 - 30 项",
                  color: "#ff5428",
                },
                {
                  gte: 10,
                  lt: 20,
                  label: "10 - 20 项",
                  color: "#ff8c71",
                },
                {
                  gte: 0,
                  lt: 10,
                  label: "0 - 10 项",
                  color: "#ffd768",
                },
              ],
            },

            series: [
              {
                name: "获奖数",
                data: result,
                type: "map",
                map: "china",
                zoom: 1.2,
                aspectScale: 0.75,
                label: {
                  // 默认文本标签样式
                  normal: {
                    color: "#fff",
                    show: true,
                    formatter: function (params) {
                      console.log('城市名称',params)
                      if (topTenProvinces.indexOf(params.name) !== -1) {
                        return params.name;
                      } else {
                        return '';
                      }
                    }
                  },
                  // 高亮文本标签样式
                  emphasis: {
                    color: "#999",
                    fontSize: 22,
                    fontWeight: "bold",
                  },
                },
                itemStyle: {
                  // 默认区域样式
                  normal: {
                    // 区域背景透明
                    // areaColor: "transparent",
                    borderColor: "rgba(39,211,233, 1)",
                    borderWidth: 1,
                  },
                  // 高亮区域样式
                  emphasis: {
                    // 高亮区域背景色
                    areaColor: "#7f1100",
                    label: {
                      show: true,
                    },
                  },
                },
              },
            ],
          };
          document.getElementById('echart_china').removeAttribute('_echarts_instance_');
          // 4. 显示地图
          var chartContainer = this.$echarts.init(document.getElementById('echart_china'));
          chartContainer.setOption(option);
          window.onresize = function () {
            chartContainer.resize();
          };
        })).catch((error) => {
          console.error(error);
        });
      }
    },

  },
  mounted() {
    this.initecharts_1();
    this.initone();
    this.inittwo();
    this.initthree();
    this.initfour();
    this.initfive();
    this.initsix();
  }
  ,
  watch: {
    value(newvalue) {
      console.log("监听到数据发生变化")
      this.initone();
      this.inittwo();
      // this.initthree();
      this.initfour();
      this.initMap();
    }
  }
  ,
  data() {
    return {
      show: true,
      mid_xresult: [],
      mid_yresult: [],
      realvalue: '',
      options: [{
        value: '全部',
        label: '全部',
      }, {
        value: '2019',
        label: '2019'
      }, {
        value: '2020',
        label: '2020'
      }, {
        value: '2021',
        label: '2021'
      }, {
        value: '2022',
        label: '2022'
      }, {
        value: '2023',
        label: '2023'
      }],
      value: '',
      //年月份
      yearsSelect: [],
      monthsSelect: ['全部', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
      // 显示搜索条件
      showSearch: true,
      chart: null,
      like: true,
      value1: 30,
      title1: "今日网站浏览量",
      title2: "今日竞赛报名人数",
      value2: "",
      title3: '今日知识发布量',
      value3: "",
      myColors: ['#1f77b4', '#629fc9', '#94bedb', '#c9e0ef'],
      defaultWords: [],
      // 表单查询数据
      searchParams: {
        schoolId: null,
        gradeId: null,
        school: null,
        schoolNumber: null,
        collegeNumber: null,
        regionNumber: null,
        collegeName: null,
        major: null,
        majorNumber: null,
        gradeIdList: [],
        year: new Date().getFullYear(),
        month: (new Date().getMonth() + 1).toString().padStart(2, '0')
      },
      // 获奖表单查询数据
      searchHonorParams: {
        schoolId: null,
        gradeId: null,
        school: null,
        schoolNumber: null,
        collegeNumber: null,
        regionNumber: null,
        collegeName: null,
        major: null,
        majorNumber: null,
        gradeIdList: [],
        year: new Date().getFullYear(),
        month: (new Date().getMonth() + 1).toString().padStart(2, '0')
      },
      regionList: [],
      schoolList: [],
      collegeList: [],
      majorList: [],
      regionHonorList: [],
      schoolHonorList: [],
      collegeHonorList: [],
      majorHonorList: [],
      chartLoading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        school: null,
        collegeName: null,
        major: null
      },
      gradeList: [
        "大一",
        "大二",
        "大三",
        "大四"
      ],
    };
  }
  ,
}
;
</script>
<style lang="scss">
.race-track {
  width: 150px;
  height: 50px;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  border: #FFFFFF;
  //justify-content: center; margin-top: 10px; margin-bottom: 10px; margin-right: 10px; //display: flex; //align-items: center; //justify-content: center; position: relative; //white-space: nowrap; //overflow-x: auto; display: inline-block;
}

.track-name {
  //position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: 18px;
  color: #f0f0f0;
}



.text-right {
  text-align: right;
}

.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}

.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

//对快捷菜单的css样式
.a-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.a-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

//菜单图片的css
.menu-img {
  width: 80%;
  height: 80%;

}

//最上面三个标题图片的css
.title-img {
  width: 18px;
  height: 18px;
}

//学院报名情况
.collegeRegistration, .honor-contest, .rose-contest {
  height: 230px;
}


.yuntu, .collegeReward, .rose-contestHonor {
  height: 230px;
}

.echart_china {
  height: 600px;

  //height: 100vh;
}

//可视化界面的三列
//.chartCol {
//  height:100vh;
//}
//最上面三个统计
.title-s {
  font-size: 20px;
}

//统计里的数字
.title-2 {
  font-size: 20px;
}

//第一列的三个图表间隔
//.row_style {
//  margin-top: 1rem;
//  margin-bottom: 1rem;
//}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-color: #06164A;
  background-size: cover;
  /* 行高是字体1.15倍 */
  line-height: 1.15;
}


/*header {*/
/*    position: relative;*/
/*    height: 1.25rem;*/
/*    background: url(../img/head_bg.png) no-repeat top center;*/
/*    background-size: 100% 100%;*/
/*}*/

/*header h1 {*/
/*    font-size: 0.475rem;*/
/*    color: #fff;*/
/*    text-align: center;*/
/*    line-height: 1rem;*/
/*}*/

/*header .showTime {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    right: 0.375rem;*/
/*    line-height: 0.9375rem;*/
/*    font-size: 0.25rem;*/
/*    color: rgba(255, 255, 255, 0.7);*/
/*}*/

.mainbox {
  min-width: 1024px;
  max-width: 1920px;
  min-height: 1400px;
  padding: 0.125rem 0.125rem 0;
  display: flex;
  background: #06164A;
}

.mainbox .column {
  flex: 3;
}

.mainbox .column:nth-child(2) {
  flex: 5;
  margin: 0 0.125rem 0.1875rem;
  overflow: hidden;
}

.panel {
  position: relative;
  //height: 3.875rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: rgba(255, 255, 255, 0.04);
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;
}

.panel::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  border-radius: 20%;
}
.map::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  border-radius: 20%;
}
.panel::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  border-radius: 20%;
}
.map::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  border-radius: 20%;
}
.panel .pana-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.panel .pana-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  border-radius: 20%;
}
.map .map-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  border-radius: 20%;
}
.panel .pana-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  border-radius: 20%;
}
.map .map-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  border-radius: 20%;
}
.panel h2 {
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  color: #fff;
  font-size: 0.25rem;
  font-weight: 400;
}

.panel h2 a {
  margin: 0 0.1875rem;
  color: #fff;
  text-decoration: underline;
}

.panel .chart {
  height: 3rem;
}

.no {
  background: rgba(101, 132, 226, 0.1);
  padding: 0.1875rem;
}

.no .no-hd {
  position: relative;
  border: 1px solid rgba(25, 186, 139, 0.17);
}

.no .no-hd::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  top: 0;
  left: 0;
}

.no .no-hd::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  right: 0;
  bottom: 0;
}

.no .no-hd ul {
  display: flex;
}

.no .no-hd ul li {
  position: relative;
  flex: 1;
  text-align: center;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.875rem;
  color: #ffeb7b;
  padding: 0.05rem 0;
  font-family: electronicFont;
  font-weight: bold;
}

.no .no-hd ul li:first-child::after {
  content: "";
  position: absolute;
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  right: 0;
  top: 25%;
}

.no .no-bd ul {
  display: flex;
}

.no .no-bd ul li {
  flex: 1;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  font-size: 0.225rem;
  color: rgba(255, 255, 255, 0.7);
  padding-top: 0.125rem;
}

.map {
  position: relative;
  //height: 10.125rem;
  background-color: #06164A;
  border: 1px solid rgba(25, 186, 139, 0.17);
}

.map .chart {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  //height: 10.125rem;
  width: 100%;
}

.map .map1,
.map .map2,
.map .map3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6.475rem;
  height: 6.475rem;
  //background: url(/src/assets/images/map.png) no-repeat;
  background-size: 100% 100%;
  opacity: 0.3;
}

.map .map2 {
  width: 8.0375rem;
  height: 8.0375rem;
  //background-image: url(/src/assets/images/lbx.png);
  opacity: 0.6;
  animation: rotate 15s linear infinite;
  z-index: 2;
}

.map .map3 {
  width: 7.075rem;
  height: 7.075rem;
  //background-image: url(/src/assets/images/jt.png);
  animation: rotate1 10s linear infinite;
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}

@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
}

</style>
